<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        第一种、h5新增的web存储：localStorage sessionStorage 
        第二种、cookie

        localStorage sessionStorage 都是本地存储存储空间都在5m左右 cookie存储空间很小只有4k左右
        只不过cookie可以在服务器和客户端之间穿梭 且cookie可以通过域名进行隔离
        localStorage 长存储 必须用户手动删除才能删除数据
        sessionStorage存储的数据在当前对话结束后会删除 而且没有联系的不同页面间不能共享
        cookie可以配置存储时间
     -->
     <button onclick="fun()">点击</button>
     <a href="./12-1.html" target="blank">跳转进入12.1</a>
    <script>
        // localStorage
        // function fun() {
        //     // setItem 第一个参数是要存储的数据的属性名（自定义） 第二个是要存储的数据
        //     localStorage.setItem('name', '要存储的数据')

        //     localStorage.setItem('age', 15)

        //     localStorage.setItem('isSingle', false)
        // }
        // getItem 获取存储的数据的方法 参数是存储的数据的key
        // console.log(localStorage.getItem('isSingle'))
        // console.log(JSON.parse(localStorage.getItem('isSingle')))
        // if(JSON.parse(localStorage.getItem('isSingle')))  {
        //     console.log('我想找个女盆友')
        // } else {
        //     console.log('我结婚了')
        // }\
        // removeItem删除存储数据的方法 参数是key
        // localStorage.removeItem('age')
        // 清除所有的存储数据
        // localStorage.clear()
        // sessionStorage和localStorage的api方法和用法都一样
        // 
        // function fun() {
        //     // setItem 第一个参数是要存储的数据的属性名（自定义） 第二个是要存储的数据
        //     sessionStorage.setItem('name', '要存储的数据')

        //     sessionStorage.setItem('age', 15)

        //     sessionStorage.setItem('isSingle', false)
        // }

        // console.log(sessionStorage.getItem('name'))

        // cookie
        var date = new Date('2021-01-17')
        document.cookie = "name=张三"
        document.cookie = "age=14; expires=" + date // 删除cookie的方法就是给cookie设置过期时间在当前事件之前就可以了

        console.log(document.cookie) // 获取cookie的方法
        // domain设置可以获取cookie的服务器域名
        // path 可以获取cookie的页面地址
    </script>
</body>
</html>